<template>
  <div class="datasource">
    <div class="button">
        <el-button type="primary" @click="dialogFormVisible = true">新增数据源</el-button>
        <el-button type="primary" @click="deleteDataSource()">删除数据源</el-button>
    </div>
    <el-dialog title="新增数据源" :visible.sync="dialogFormVisible">
      <el-form :model="form" :label-width="formLabelWidth" label-position="right">
        <el-form-item label="连接池名称" required>
          <el-input v-model="form.poolName"></el-input>
        </el-form-item>
        <el-form-item label="JDBC驱动" required>
          <el-select v-model="form.driverClassName" placeholder="请选JDBC驱动">
            <el-option label="com.mysql.cj.jdbc.Driver（mysql8）" value="com.mysql.cj.jdbc.Driver"></el-option>
            <el-option label="com.mysql.jdbc.Driver(mysql5)" value="com.mysql.jdbc.Driver"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="url" required>
          <el-input v-model="form.url" placeholder="jdbc:mysql://x.x.x.x:3306/x?useUnicode=true&characterEncoding=utf-8"></el-input>
        </el-form-item>
        <el-form-item label="用户名" required>
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="form.password"></el-input>
        </el-form-item>
     </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addDataSource()">确 定</el-button>
    </div>
</el-dialog>
<el-table
    ref="multipleTable"
    :data="tableData"
    :header-cell-style="{ background: '#E5E9F4' }"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column prop="poolName" label="连接池名称" width="120"></el-table-column>
    <el-table-column prop="driverClassName" label="JDBC驱动" width="180"></el-table-column>
    <el-table-column prop="username" label="用户名" width="120"></el-table-column>
    <el-table-column prop="password" label="密码" width="120"></el-table-column>
    <el-table-column prop="url" label="url" show-overflow-tooltip></el-table-column>
  </el-table>

  </div>
</template>

<script>
  export default {
    name: "Datasource",
    data() {
      return {
        dialogFormVisible: false,
        form: {
          poolName: '',
          driverClassName: '',
          url: '',
          username: '',
          password: ''
        },
        tableData:[],
        multipleSelection: [],
        formLabelWidth: '100px'
      };
    },
   mounted () {
    this.getDataSources()
    },
    methods: {
       handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      addDataSource(){
        this.$http.post('/datasource/addDruid', this.form)
        .then(res => {
          console.log(res.data);
          console.log(res.data.code);
          if (res.data.code === 0) {
            this.$message.success(res.data.message)
            this.dialogFormVisible = false

          }else{
            this.$message.error(res.data.message)
          }
        }).catch(err => {
          
        })
      },

      async getDataSources() {
        await this.$http.get('/datasource/')
        .then(res => {
          console.log(res.data);
          console.log(res.data.code);
          if (res.data.code === 0) {
            this.tableData = res.data.data
          }
        }).catch(err => {
          
        })
      },
      deleteDataSource(){
        if(this.multipleSelection.length === 0){
          this.$message.warning("请选择删除数据源")
          return;
        }
        this.$confirm('是否确认删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
            iconClass: 'ssf ss-icon-xunwen'
					}).then(async () => {
						let poolNames = [];
            this.multipleSelection.forEach((item)=>{
            poolNames.push(item.poolName);
            console.log(poolNames)
            this.$http.post('/datasource/remove',poolNames)
            .then(res => {
              console.log(res.data);
              console.log(res.data.code);
              if (res.data.code === 0) {
                this.$message.success(res.data.message)
                this.getDataSources();
              }else{
                this.$message.error(res.data.message)
              }

            }).catch(err => {})
          });
					}).catch(() => {});
      }
    }
  };
</script>

<style scoped>
.button {
  text-align: right;
}
</style>